<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>简历详情</span>
        <el-button v-if="isEdit && resume.status === 'pending'" style="float: right; margin-left: 10px;" size="small" type="success" @click="handleApprove">通过</el-button>
        <el-button v-if="isEdit && resume.status === 'pending'" style="float: right;" size="small" type="danger" @click="handleReject">拒绝</el-button>
      </div>

      <el-form :model="resume" label-width="120px" class="resume-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名">
              <span>{{ resume.name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应聘职位">
              <span>{{ resume.position }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系电话">
              <span>{{ resume.phone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮箱">
              <span>{{ resume.email }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年龄">
              <span>{{ resume.age }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作经验">
              <span>{{ resume.experience }}年</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="教育背景">
          <div class="education-list">
            <div v-for="(edu, index) in resume.education" :key="index" class="education-item">
              <p>{{ edu.school }} - {{ edu.major }}</p>
              <p>{{ edu.degree }} | {{ edu.startTime }} - {{ edu.endTime }}</p>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="工作经历">
          <div class="work-list">
            <div v-for="(work, index) in resume.workExperience" :key="index" class="work-item">
              <p>{{ work.company }} - {{ work.position }}</p>
              <p>{{ work.startTime }} - {{ work.endTime }}</p>
              <p>{{ work.description }}</p>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="技能特长">
          <div class="skills">
            <el-tag v-for="skill in resume.skills" :key="skill" style="margin-right: 10px;">{{ skill }}</el-tag>
          </div>
        </el-form-item>

        <el-form-item label="自我评价">
          <div class="description">{{ resume.selfDescription }}</div>
        </el-form-item>

        <el-form-item v-if="resume.status !== 'pending'" label="处理结果">
          <el-tag :type="resume.status === 'approved' ? 'success' : 'danger'">
            {{ resume.status === 'approved' ? '已通过' : '已拒绝' }}
          </el-tag>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getResumeDetail, updateResumeStatus } from '@/api/hr/resume'

export default {
  name: 'ResumeDetail',
  data() {
    return {
      resume: {
        name: '',
        position: '',
        phone: '',
        email: '',
        age: '',
        experience: '',
        education: [],
        workExperience: [],
        skills: [],
        selfDescription: '',
        status: 'pending'
      },
      isEdit: false
    }
  },
  created() {
    this.getDetail()
    this.isEdit = this.$route.query.action === 'edit'
  },
  methods: {
    async getDetail() {
      const { data } = await getResumeDetail(this.$route.params.id)
      this.resume = data
    },
    async handleApprove() {
      try {
        await updateResumeStatus(this.resume.id, 'approved')
        this.$message({
          type: 'success',
          message: '已通过该简历'
        })
        this.getDetail()
      } catch (error) {
        console.error('Error approving resume:', error)
      }
    },
    async handleReject() {
      try {
        await updateResumeStatus(this.resume.id, 'rejected')
        this.$message({
          type: 'success',
          message: '已拒绝该简历'
        })
        this.getDetail()
      } catch (error) {
        console.error('Error rejecting resume:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.resume-form {
  margin-top: 20px;

  .education-item,
  .work-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    p {
      margin: 5px 0;
    }
  }

  .skills {
    .el-tag {
      margin-bottom: 5px;
    }
  }

  .description {
    line-height: 1.6;
    color: #606266;
  }
}
</style>